<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab">
				<el-tab-pane label="盘点单详情" name="1"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<div class="tabBoxHead" v-if="Model.OutofstockBtn == 0">
					<p class="tabBoxHeadBtn" @click="BegainInventory">开始盘点</p>
				</div>
				<div class="tabBoxStep">
					<el-steps :active="Model.stepOption.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">盘点单信息</p>
					</div>
					<advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>
				</el-row>
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
                        <div class="detailTableItemTitle">
                            <img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
                            <p class="text">盘点明细</p>
                            <div class="tableItemTitleNumber" v-if="Model.Outofstock == 0">
                                <div class="num">{{Model.hasBeentotal}}</div>
                                <div class="gl">/</div>
                                <div class="numall">{{Model.totalNumber}}</div>
                            </div>
                        </div>
						<div class="exportBox" v-if="Model.Outofstock == 0">
                            <div class="exportBoxAuto">
                                <div class="exportBoxHand">
                                <el-input placeholder="请输入商品编码" v-model="Model.writeSku" size="small" style="margin: 0 20px;width: 200px;"></el-input>
                                <button class="normalButton bgBtnBrown" @click="checkSku">确认</button>
                                </div>
                            </div>
                        </div>
						<div class="detailTableDetail">
							<el-table :data="Model.detailData" border style="width: 100%">
								<el-table-column type="index" width="100" label="行项目号" fixed></el-table-column>
								<el-table-column prop="orderNumber" label="盘点库位" width="120"></el-table-column>
								<el-table-column prop="goodsNumber" label="商品编码" width="200"></el-table-column>
								<el-table-column prop="description" width="250">
									<template slot="header" slot-scope="scope">
										<el-tooltip content="外观/颜色/净度/切工/3EX-非3EX/钻重" placement="top">
											<span class="iconQuestionmark">描述</span>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="numberOfDiscs" label="应盘数量" width="120"></el-table-column>
								<el-table-column prop="numberOfSolidOrders" label="实盘数量" width="120">
									<template slot-scope="scope">
                                        <el-input-number v-if="Model.Outofstock == 0" v-model="scope.row.numberOfSolidOrders" :min="0" label="描述文字"></el-input-number>
                                        <span v-else>{{scope.row.numberOfSolidOrders}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" width="240">
                                    <template slot-scope="scope">
                                        <el-input
                                            v-if="Model.Outofstock == 0"
                                            type="textarea"
                                            :rows="2"
                                            placeholder="描述文字"
                                            v-model="scope.row.remark">
                                        </el-input>
                                        <span v-else>{{scope.row.remark}}</span>
									</template>
                                </el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
                <el-row class="bottom" v-if="Model.Outofstock == 0">
					<div class="btn_group">
						<div class="btn_item" @click="inventoryHandle('保存')">保存</div>
						<div class="btn_item" @click="inventoryHandle('结束盘点')">结束盘点</div>
                        <div class="btn_item cancel" @click="submitReport">提交报告</div>
					</div>
				</el-row>
			</div>
		</div>

	</div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import {
	getDateString
} from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
	name: "purchase",
	mixins: [Model, Controller],
	components: {
		advancedSearch,
		pagination,
		pathTracking
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>
